<template>
  <div class="life-record-card card-item">
    <el-carousel v-if="props.travelItem?.recordList.length > 0"
                 arrow="always" @change="changeTravelEvent">
      <el-carousel-item v-for="(item, index) in props.travelItem?.recordList" :key="index">
        <el-image :src="serviceFileRootPath + item.imageList[0]"
                  fit="contain" alt="暂无图片">
          <template #error>
            <div class="image-slot">
              <span>暂无图片</span>
            </div>
          </template>
        </el-image>
      </el-carousel-item>
    </el-carousel>

    <el-empty v-else description="暂无记录"/>

    <div class="record-info">
      <div class="top-container">
        <div class="info-list">
          <div class="info-item">
            <span class="title">{{ props.travelItem.name }}</span>
          </div>
        </div>

        <div class="button-info">
          <el-button type="primary" :icon="Edit" circle :size="'small'"
                     @click="editClick"/>
          <el-button type="primary" :icon="MoreFilled" circle :size="'small'"
                     @click="viewClick()"/>
          <el-button type="danger" :icon="DeleteFilled" circle :size="'small'"
                     @click="deleteClick()"/>
        </div>
      </div>

      <div class="bottom-container">
        <div class="info-list">
          <div class="info-item location-item">
            <i class="fa-solid fa-location-dot"></i>
            {{ props.travelItem.area.join('-') }}
          </div>
        </div>

        <div v-if="props.travelItem?.recordList.length > 0" class="info-list">
          <div class="info-item">
            <i class="fa-solid fa-flag"></i>
            {{ parsePerson(props.travelItem.recordList[cardInfo.currentIndex].persons) }}
          </div>
          <div class="info-item">
            <i class="fa-regular fa-calendar-check"></i>
            {{ formatDate(props.travelItem.recordList[cardInfo.currentIndex].date) }}
          </div>
        </div>

        <div v-else>
          <span>暂无记录</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Edit, MoreFilled, DeleteFilled } from '@element-plus/icons-vue'
import { useTravelStore } from '@/store/travel.ts'
import { useAppStore } from '@/store/app.ts'
import { defineProps, PropType, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { formatDate } from 'vue3-common/utils/dateUtil'
import { ITravelSpot } from '@/types/travel.ts'
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
import { serviceFileRootPath } from '@/utils'
import { parsePerson } from '@/utils/home/travelUtil.ts'

const router = useRouter()
const travelStore = useTravelStore()
const appStore = useAppStore()

const cardInfo = reactive({
  currentIndex: 0
})

const props = defineProps({
  travelItem: {
    required: true,
    type: Object as PropType<ITravelSpot>
  }
})

const editClick = async () => {
  const id = props.travelItem?.id
  travelStore.travelSpotApiType = 'UPDATE'
  await travelStore.queryTravelSpot(id as number)

  appStore.isShowMobileBack = true
  await router.push({ name: 'TravelSpotForm' })
}

const viewClick = async () => {
  appStore.isShowMobileBack = true
  await router.push({ name: 'TravelDetailId', params: { id: props.travelItem?.id } })
}

const deleteClick = () => {
  travelStore.travelSpotApiType = 'DELETE'
  commonElMessageBox(`请确认是否删除该旅行: ${props.travelItem?.name}?`).then(() => {
    travelStore.handleTravelSpotApi(props.travelItem)
  })
}

const changeTravelEvent = (current: number) => {
  cardInfo.currentIndex = current
}
</script>

<style lang="scss">
@use "@/styles/home/life.record.module";
</style>
